require(['./config'], () => {
    require(['template', 'header','footer'], (template) => {
      class Shopping {
        constructor () {
          this.init()
        }
        init () {
          // 根据localStorage的数据去渲染页面
          const cartList = window.localStorage.getItem('cart')
        //   // 判读那购物车是否为空
          if (cartList) {
        //     // 渲染table
            this.cartList = JSON.parse(cartList)
            this.renderCart()
          } else {
        //     // 代表购物车没有数据
            $('#shopping_car').hide()
            $('#cart-empty').show()
          }
        }
        renderCart () {
          $('#shop_tbody').html(template('srcShop', { cartList: this.cartList }))
          // 购物车也米娜渲染完成以后默认调用一次计算总价
          this.calcTotalMoney()
          this.checksChange()
        }
        checksChange () {
          // 单选框修改事件
          // 保留外层this
          const _this = this
          $('.checks').on('change', function () {
            // 找到当前商品的id
            const id = Number($(this).parents('tr').attr('data-id'))
            console.log(id)
            _this.cartList = _this.cartList.map(shop => {
              // 根据从数据里找到当前商品，把商品的check属性赋值为当前选框的状态
              if (shop.id === id) {
                shop.check = $(this).prop('checked')
              }
              return shop
            })
            // 把localStorage更新
            window.localStorage.setItem('cart', JSON.stringify(_this.cartList))
            // 重新算一次总价
            _this.calcTotalMoney()
          })
        }
        calcTotalMoney () {
          // 计算总价，无论做了什么骚操作，只要对结果有影响我就调用这个方法重新算总价
          const money = this.cartList.reduce((total, shop) => {
            if (shop.check) {
              total += shop.price * shop.count
            }
            return total
          }, 0)
          $('#Paymoney').html(money)
        }
      }
      new Shopping()
    })
  })